<template>
  <div class="form" style="height: 100%">
    <div>
      <div>
        <el-form v-model="form">
          <div class="global_box" style="padding: 4px; height: 100%; width: 100%">
            <el-select v-model="form.api_type" filterable placeholder="接口类型" style="padding: 10px">
              <el-option
                v-for="item in api_type"
                :key="item.api_type_value"
                :label="item.label"
                :value="item.api_type_value"
              />
            </el-select>
            <el-select v-model="form.method" placeholder="请求方法" style="width: 120px">
              <el-option
                v-for="item in method_form"
                :key="item.method_value"
                :label="item.label"
                :value="item.method_value"
              />
            </el-select>
            <el-select v-model="form.environment_id" filterable placeholder="域名" style="padding: 10px">
              <el-option
                v-for="env in env_form"
                :key="env.environment_id"
                :label="env.environment_name"
                :value="env.environment_id"
              />
            </el-select>
            <el-input id="url" v-model="form.url" placeholder="接口地址" style="width: 370px; padding-right: 10px" />
            <el-button type="success" style="padding: 10px" icon="el-icon-s-promotion" @click="send">Send</el-button>
            <el-dropdown trigger="click" style="padding-left: 50px">
              <el-button icon="el-icon-s-tools" type="info" circle>
                <!--                <i class="el-icon-arrow-down el-icon&#45;&#45;right" />-->
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item icon="el-icon-s-promotion" @click.native="get_env_all">环境管理</el-dropdown-item>
                <el-dropdown-item divided icon="el-icon-s-help" @click.native="get_var_all">变量管理</el-dropdown-item>
                <el-dropdown-item divided icon="el-icon-time" @click.native="time_view">时间戳转换</el-dropdown-item>
                <el-dropdown-item divided icon="el-icon-info" @click.native="api_detail">接口说明</el-dropdown-item>
                <el-dropdown-item divided icon="el-icon-time" @click.native="api_history">执行历史</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <el-button type="primary" style="padding: 10px; float: right" icon="el-icon-s-promotion" @click.native="batch_send">批量请求</el-button>
          </div>
          <div style="height: 100%; width: 100%" class="req_activeName_global_box">
            <el-tabs v-model="req_activeName" value="params" type="border-card" @tab-click="tab_click">
              <el-tab-pane style="font-weight:bolder" label="路径参数" name="Params">
                <div>
                  <el-table :data="form.params">
                    <template slot="empty">
                      <el-button type="success" icon="el-icon-circle-plus-outline" @click="add_params">Add</el-button>
                    </template>
                    <el-table-column label="key">
                      <template slot-scope="scope">
                        <el-input id="params_key" v-model="scope.row.key" />
                      </template>
                    </el-table-column>
                    <el-table-column label="value">
                      <template slot-scope="scope">
                        <el-input id="params_value" v-model="scope.row.value" />
                      </template>
                    </el-table-column>
                    <el-table-column>
                      <template slot-scope="scope">
                        <el-button type="success" icon="el-icon-circle-plus-outline" @click="add_params" />
                        <el-button type="danger" icon="el-icon-remove-outline" @click.native.prevent="del_params(scope.$index, scope.row)" />
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-tab-pane>
              <el-tab-pane label="Headers" name="Headers">
                <vue-json-editor
                  v-model="form.headers"
                  :show-btns="false"
                  :mode="'code'"
                  style="height: 100%"
                />
              </el-tab-pane>
              <el-tab-pane label="Body" name="Body">
                <el-radio-group v-model="form.body_type" style="padding-block-end: 10px">
                  <el-radio :label="4" value="4">None</el-radio>
                  <el-radio :label="1" value="1">form-data</el-radio>
                  <el-radio :label="2" value="2">JSON</el-radio>
                  <el-radio :label="3" value="3">x-www-form-urlencoded</el-radio>
                </el-radio-group>
                <vue-json-editor
                  v-model="form.body"
                  :show-btns="false"
                  :mode="'code'"
                  style="height: 100%"
                />
              </el-tab-pane>
              <el-tab-pane label="断言" name="Assert">
                <div>
                  <el-table :data="form.assert_form">
                    <template slot="empty">
                      <el-button type="success" icon="el-icon-circle-plus-outline" @click="add_assert">Add</el-button>
                    </template>
                    <el-table-column :render-header="renderHeader" label="字段名">
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.assert_key" placeholder="$.code" />
                      </template>
                    </el-table-column>
                    <el-table-column label="结果">
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.assert_value" />
                      </template>
                    </el-table-column>
                    <el-table-column>
                      <template slot-scope="scope">
                        <el-button type="success" icon="el-icon-circle-plus-outline" @click="add_assert" />
                        <el-button type="danger" icon="el-icon-remove-outline" @click.native.prevent="del_assert(scope.$index, scope.row)" />
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-tab-pane>
              <el-tab-pane label="变量提取" name="loacl_Variable">
                <div>
                  <el-table :data="form.extract">
                    <template slot="empty">
                      <el-button type="success" icon="el-icon-circle-plus-outline" @click="add_extract_form">Add</el-button>
                    </template>
                    <el-table-column label="变量名称">
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.variable_name" />
                      </template>
                    </el-table-column>
                    <el-table-column label="变量路径">
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.variable_data" placeholder="res.content" />
                      </template>
                    </el-table-column>
                    <el-table-column>
                      <template slot-scope="scope">
                        <el-button type="success" icon="el-icon-circle-plus-outline" @click="add_extract_form" />
                        <el-button type="danger" icon="el-icon-remove-outline" @click.native.prevent="del_extract_form(scope.$index, scope.row)" />
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-tab-pane>
              <el-tab-pane label="参数化管理" name="Parameterization">
                <div style="padding: 2px">
                  <el-button type="primary" icon="el-icon-circle-plus-outline" @click="upload_file">上传文件</el-button>
                </div>
                <div>
                  <el-table
                    :data="parametric_data"
                    element-loading-text="Loading"
                    border
                    fit
                    highlight-current-row
                    style="float:left;width:100%"
                    model
                  >
                    <el-table-column align="center" label="ID" width="90px">
                      <template slot-scope="scope">
                        {{ scope.row.id }}
                      </template>
                    </el-table-column>
                    <el-table-column label="文件名" width="300px">
                      <template slot-scope="scope">
                        {{ scope.row.file_name }}
                      </template>
                    </el-table-column>
                    <el-table-column label="参数化类型" :show-overflow-tooltip="true">
                      <template slot-scope="scope">
                        <span v-if="scope.row.parametric_type===1"><el-tag>Params参数</el-tag></span>
                        <span v-if="scope.row.parametric_type===2"><el-tag>Body参数</el-tag></span>
                        <span v-if="scope.row.parametric_type===3"><el-tag>Assert参数</el-tag></span>
                      </template>
                    </el-table-column>
                    <el-table-column label="内容体" :show-overflow-tooltip="true">
                      <template slot-scope="scope">
                        {{ scope.row.file_content }}
                      </template>
                    </el-table-column>
                    <el-table-column align="left" prop="created_at" width="200px" label="update_time">
                      <template slot-scope="scope">
                        <span>{{ scope.row.update_time }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column align="center" prop="created_at" width="100px" label="更新人">
                      <template slot-scope="scope">
                        <span>{{ scope.row.username }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column align="center" prop="action" label="操作" width="200px">
                      <template slot-scope="scope">
                        <el-button type="danger" size="small" @click="del_parametric(scope.row)">删除</el-button>
                        <el-button type="primary" size="small" @click="edit_dialog(scope.row.id, scope.row.file_content)">编辑</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
                <div class="block">
                  <el-pagination
                    background
                    :current-page=" parametric.current_page"
                    :page-sizes="[3]"
                    :page-size="parametric.size_page"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="parametric_total"
                    style="float: left; padding: 10px"
                    @size-change="handleparametricChange"
                    @current-change="handleparametricCurrentChange"
                  />
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
          <div style="height: 100%; width: 100%" class="global_box">
            <!-- <el-title>响应结果</el-title>-->
            <el-tabs v-model="res_activeName" type="border-card" @tab-click="result_tab_click">
              <el-tab-pane v-show="1 === number" label="响应结果" name="body">
                <vue-json-editor
                  v-model="res_form.res_data"
                  :show-btns="false"
                  :mode="'code'"
                  style="height: 100%"
                />
              </el-tab-pane>
              <el-tab-pane label="断言结果" name="third">
                <div>
                  <el-table border :data="res_form.assert_data">
                    <el-table-column label="断言字段名">
                      <template slot-scope="scope">
                        {{ scope.row.assert_key }}
                      </template>
                    </el-table-column>
                    <el-table-column label="断言值">
                      <template slot-scope="scope">
                        {{ scope.row.assert_value }}
                      </template>
                    </el-table-column>
                    <el-table-column label="结果">
                      <template slot-scope="scope">
                        <span v-if="scope.row.status===true"><el-tag type="success">True</el-tag></span>
                        <span v-if="scope.row.status===false"><el-tag type="danger">False</el-tag></span>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-tab-pane>
              <el-tab-pane label="变量提取-结果" name="fourth">
                <div>
                  <el-table :data="res_form.variable">
                    <el-table-column label="变量名称">
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.variable_name" readonly />
                      </template>
                    </el-table-column>
                    <el-table-column label="变量路径">
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.variable_data" readonly placeholder="" />
                      </template>
                    </el-table-column>
                    <el-table-column label="变量结果">
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.variable_result" readonly placeholder="" />
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-tab-pane>
              <el-tab-pane label="接口请求详情" name="fifth">
                <div style="height: 282px; overflow: scroll">
                  <p>接口请求状态：{{ res_form.status }}</p>
                  <p>请求资源大小：{{ res_form.size }}</p>
                  <p>接口响应时间：{{ res_form.response_time }}</p>
                  <p>[ url ] ==>  {{ res_form.host }}</p>
                  <p>[ params ] ==>  {{ res_form.params }}</p>
                  <p>[ headers ] ==>  {{ res_form.headers }}</p>
                  <p>[ body ] ==>  {{ res_form.body }}</p>
                  <p>[ response ] ==>  {{ res_form.res_data }}</p>
                </div>
              </el-tab-pane>
              <el-tab-pane label="批量执行结果" name="batch_result">
                <div>
                  <el-table
                    :data="batch_form"
                    element-loading-text="Loading"
                    border
                    fit
                    highlight-current-row
                    style="float:left;width:100%"
                  >
                    <el-table-column align="center" label="ID" width="90px">
                      <template slot-scope="scope">
                        {{ scope.row.id }}
                      </template>
                    </el-table-column>
                    <el-table-column label="URL" :show-overflow-tooltip="true">
                      <template slot-scope="scope">
                        {{ scope.row.url }}
                      </template>
                    </el-table-column>
                    <el-table-column label="method" width="100px" align="center">
                      <template slot-scope="scope">
                        <span v-if="scope.row.method===1"><el-tag type="success">GET</el-tag></span>
                        <span v-if="scope.row.method===2"><el-tag type="danger">POST</el-tag></span>
                        <span v-if="scope.row.method===3"><el-tag type="info">PUT</el-tag></span>
                        <span v-if="scope.row.method===4"><el-tag type="warning">DELETE</el-tag></span>
                      </template>
                    </el-table-column>
                    <el-table-column label="params" :show-overflow-tooltip="true">
                      <template slot-scope="scope">
                        {{ scope.row.params }}
                      </template>
                    </el-table-column>
                    <el-table-column align="left" prop="Body" label="请求体" :show-overflow-tooltip="true">
                      <template slot-scope="scope">
                        <span>{{ scope.row.body }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="assert_status" width="100px" label="status" align="center">
                      <template slot-scope="scope">
                        <span v-if="scope.row.status===1"><el-tag type="success">Success</el-tag></span>
                        <span v-if="scope.row.status===0"><el-tag type="danger">Fail</el-tag></span>
                      </template>
                    </el-table-column>
                    <el-table-column align="center" prop="created_at" label="执行人">
                      <template slot-scope="scope">
                        <span>{{ scope.row.username }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column align="center" prop="action" label="操作" width="200px">
                      <template slot-scope="scope">
                        <el-button type="success" size="small" @click="batch_result_info(scope.row.id)">查看详情</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
                <div class="block">
                  <el-pagination
                    background
                    :current-page=" parametric_result.current_page"
                    :page-sizes="[4]"
                    :page-size="parametric_result.size_page"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="parametric_result_total"
                    style="float: left; padding: 10px"
                    @size-change="handleparametricresultChange"
                    @current-change="handleparametricresultCurrentChange"
                  />
                </div>
              </el-tab-pane>
              <el-tab-pane disabled style="float: right">
                <template #label>
                  <div class="tab-info">
                    <i class="el-icon-monitor" style="font-size: 16px" />
                    <span slot="code" class="code">Status：{{ res_form.status }}</span>
                  </div>
                </template>
              </el-tab-pane>
              <el-tab-pane disabled>
                <template #label>
                  <div class="tab-info">
                    <i class="el-icon-document" style="font-size: 16px" />
                    <span slot="size" class="size">Resources：{{ res_form.size }}</span>
                  </div>
                </template>
              </el-tab-pane>
              <el-tab-pane disabled>
                <template #label>
                  <div class="tab-info">
                    <i class="el-icon-time" style="font-size: 16px" />
                    <span slot="size" class="size">Time：{{ res_form.response_time }}</span>
                  </div>
                </template>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-form>
        <div>
          <el-dialog
            title="环境"
            :visible.sync="dialogVisible"
            width="70%"
          >
            <div style="max-height: 600px;overflow: auto">
              <div style="padding-block-end: 10px">
                <el-input id="task_name" v-model="env_page.env_name" placeholder="请输入环境名称" style="width: 800px; padding-right: 10px;" />
                <el-button type="primary" size="medium" style="padding: 10px;" @click="get_env_all">搜索</el-button>
                <el-button type="success" size="medium" style="float: right" @click="create_env">新增环境</el-button>
              </div>
              <el-table
                :data="table_data"
                element-loading-text="Loading"
                border
                fit
                highlight-current-row
              >
                <el-table-column align="center" label="ID">
                  <template slot-scope="scope">
                    {{ scope.row.environment_id }}
                  </template>
                </el-table-column>
                <el-table-column label="环境名称" width="280px">
                  <template slot-scope="scope">
                    {{ scope.row.environment_name }}
                  </template>
                </el-table-column>
                <el-table-column label="环境地址" width="280px">
                  <template slot-scope="scope">
                    {{ scope.row.environment_address }}
                  </template>
                </el-table-column>
                <el-table-column class-name="status-col" label="描述" align="center">
                  <template slot-scope="scope">
                    {{ scope.row.environment_e_describe }}
                  </template>
                </el-table-column>
                <el-table-column label="更新人" align="center">
                  <template slot-scope="scope">
                    {{ scope.row.username }}
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="action" label="操作">
                  <template slot-scope="scope">
                    <el-button type="primary" size="small" @click="edit_env_dialog(scope.row.environment_id)">编辑</el-button>
                    <el-button type="danger" size="small" @click="del_dialog(scope.row.environment_id)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-pagination
                background
                :current-page="env_page.current_page"
                :page-sizes="[6]"
                :page-size="env_page.size_page"
                layout="total, sizes, prev, pager, next, jumper"
                :total="env_case_total"
                style="float: left; padding: 10px"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
          </el-dialog>
        </div>
        <div>
          <el-dialog
            title="变量管理"
            :visible.sync="dialog_var_Visible"
            width="70%"
          >
            <div style="max-height: 600px;overflow: auto">
              <div style="padding-block-end: 10px">
                <el-input id="var_name" v-model="var_page.local_variable_name" placeholder="请输入变量名称" style="width: 800px; padding-right: 10px;" />
                <el-button type="primary" size="medium" style="padding: 10px;" @click="get_var_all">搜索</el-button>
                <el-button type="success" size="medium" style="float: right" @click="create_env">新增环境</el-button>
              </div>
              <el-table
                :data="var_table_data"
                element-loading-text="Loading"
                border
                fit
                highlight-current-row
                style="float:left;width:100%"
              >
                <el-table-column align="center" label="ID">
                  <template slot-scope="scope">
                    {{ scope.row.local_variable_id }}
                  </template>
                </el-table-column>
                <el-table-column label="变量名称">
                  <template slot-scope="scope">
                    {{ scope.row.local_variable_name }}
                  </template>
                </el-table-column>
                <el-table-column label="变量路径">
                  <template slot-scope="scope">
                    {{ scope.row.local_variable_data }}
                  </template>
                </el-table-column>
                <el-table-column class-name="status-col" label="变量结果" align="left" :show-overflow-tooltip="true">
                  <template slot-scope="scope">
                    {{ scope.row.local_variable_result }}
                  </template>
                </el-table-column>
                <el-table-column label="描述" align="left">
                  <template slot-scope="scope">
                    {{ scope.row.local_variable_description }}
                  </template>
                </el-table-column>
                <el-table-column label="username" align="left">
                  <template slot-scope="scope">
                    {{ scope.row.username }}
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="action" label="操作">
                  <template slot-scope="scope">
                    <el-button type="primary" size="small" @click="edit_var_dialog(scope.row.local_variable_id)">编辑</el-button>
                    <el-button type="danger" size="small" @click="del_var_dialog(scope.row.local_variable_id)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-pagination
                background
                :current-page="var_page.current_page"
                :page-sizes="[6]"
                :page-size="var_page.size_page"
                layout="total, sizes, prev, pager, next, jumper"
                :total="var_total"
                style="float: left; padding: 10px"
                @size-change="handleSizeChange_var"
                @current-change="handleCurrentChange_var"
              />
            </div>
          </el-dialog>
        </div>
      </div>
    </div>
    <div>
      <el-dialog
        v-if="dialog_Import"
        :visible.sync="dialog_Import"
        title="上传参数化文件"
        width="30%"
        append-to-body
      >
        <div style="text-align:center">
          <!-- 此处action需为有效的任意接口——当前为官网范例接口 -->
          <el-form>
            <el-form-item label-width="-150px" size="medium">
              <el-select v-model="form.parametric_type" placeholder="请选择参数类型">
                <el-option
                  v-for="item in parametric_type_form"
                  :key="item.parametric_type"
                  :label="item.label"
                  :value="item.parametric_type"
                />
              </el-select>
            </el-form-item>
          </el-form>
          <el-upload
            ref="upload"
            drag
            :limit="1"
            class="upload-demo"
            action=""
            accept=".xlsx, .xls"
            :auto-upload="false"
            :file-list="fileList"
            :on-change="handleChange"
            :on-remove="onRemove"
            :on-success="onsuccess"
          >
            <i class="el-icon-upload" />
            <div class="el-upload__tip">可上传.xlsx, .xls文件，且只能上传 1 个文件</div>
          </el-upload>
        </div>
        <span slot="footer">
          <el-button size="mini" type="danger" @click="dialog_Import = false">取 消</el-button>
          <el-button size="mini" type="primary" @click="input_file">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <div>
      <el-dialog
        title="任务结果详情"
        :visible.sync="batch_result_dialog"
        width="40%"
      >
        <el-tabs v-model="tabs_activeName">
          <el-tab-pane label="请求url" name="req_url">
            <p>{{ batch_result_details.url }}</p>
          </el-tab-pane>
          <el-tab-pane label="请求params" name="params">
            <json-viewer :value="batch_result_details.params" />
          </el-tab-pane>
          <el-tab-pane label="请求headers" name="headers">
            <json-viewer :value="batch_result_details.headers" />
          </el-tab-pane>
          <el-tab-pane label="请求Body" name="Body">
            <json-viewer :value="batch_result_details.body" />
          </el-tab-pane>
          <el-tab-pane label="请求结果" name="req_result">
            <json-viewer :value="batch_result_details.response" />
          </el-tab-pane>
          <el-tab-pane label="断言结果" name="assert_data">
            <json-viewer :value="batch_result_details.assert_data" />
          </el-tab-pane>
          <el-tab-pane label="响应时间" name="response_time">
            <p>接口响应时间： {{ batch_result_details.response_time }}</p>
          </el-tab-pane>
        </el-tabs>
      </el-dialog>
    </div>
    <div>
      <el-dialog
        title="新增环境"
        :visible.sync="add_env_dialog"
        width="40%"
      >
        <el-form ref="form" :model="env_data" label-width="100px">
          <el-form-item label="环境名称：">
            <el-input v-model="env_data.environment_name" />
          </el-form-item>
          <el-form-item label="环境地址：">
            <el-input v-model="env_data.environment_address" />
          </el-form-item>
          <el-form-item label="环境描述：">
            <el-input v-model="env_data.environment_describe" />
          </el-form-item>
          <el-form-item>
            <div v-show="1 === number">
              <el-button v-if="create_task" type="primary" style="float: right" @click="add_env">立即创建</el-button>
            </div>
            <div v-show="2 === number">
              <el-button v-if="create_task" type="primary" style="float: right" @click="edit_env">保存</el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
    <div>
      <el-dialog
        title="提示"
        :visible.sync="del_parametric_dialog"
        width="400px"
      >
        <span>确认删除文件吗</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="del_parametric_dialog = false">取 消</el-button>
          <el-button type="primary" @click="delete_p">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <div>
      <el-dialog
        title="编辑参数化数据"
        :visible.sync="edit_parametric_dialog"
        style="height: 900px !important;"
        width="900px"
      >
        <vue-json-editor
          v-model="file_content"
          :show-btns="false"
          :mode="'code'"
          style="height: 100%"
        />
        <span slot="footer" class="dialog-footer">
          <el-button @click="edit_parametric_dialog = false">取 消</el-button>
          <el-button type="primary" @click="edit_p">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <div>
      <el-dialog
        title="提示"
        :visible.sync="del_env_dialog"
        width="18%"
      >
        <span>环境变量删除确认后，即可删除</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="del_env_dialog = false">取 消</el-button>
          <el-button type="primary" @click="del_env">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <div>
      <el-dialog
        title="时间戳转换"
        :visible.sync="time_view_dialog"
        width="50%"
      >
        <time_view />
      </el-dialog>
    </div>
    <div>
      <el-dialog
        title="接口说明：>>Markdown"
        :visible.sync="markdown_view_dialog"
        width="80%"
      >
        <div style="height: 600px; overflow: auto">
          <mavon-editor :value="form.detail" style="height: 600px" @change="markdown_valueChange" />
        </div>
        <div style="padding: 20px;position: relative">
          <el-button type="primary" style="float: right" @click="markdown_save">保存</el-button>
        </div>
      </el-dialog>
    </div>
    <div>
      <el-dialog
        title="接口执行历史记录"
        :visible.sync="history_view_dialog"
        width="55%"
      >
        <div :id="chart_name" style="width:100%; height:300px" />
        <div>
          <el-table
            :data="api_result.content"
            style="width:100%"
            border
          >
            <el-table-column align="center" label="ID" width="55">
              <template slot-scope="scope">
                {{ scope.row.id }}
              </template>
            </el-table-column>
            <el-table-column label="url" align="left">
              <template slot-scope="scope">
                {{ scope.row.url }}
              </template>
            </el-table-column>
            <el-table-column label="Method" align="center" width="100">
              <template slot-scope="scope">
                <span v-if="scope.row.method===1"><el-tag type="success">GET</el-tag></span>
                <span v-if="scope.row.method===2"><el-tag type="danger">POST</el-tag></span>
                <span v-if="scope.row.method===3"><el-tag type="info">PUT</el-tag></span>
                <span v-if="scope.row.method===4"><el-tag type="warning">DELETE</el-tag></span>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="created_at" width="180" label="执行时间">
              <template slot-scope="scope">
                <span>{{ scope.row.run_time }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="created_at" width="180" label="响应时长">
              <template slot-scope="scope">
                <span>{{ scope.row.res_time }}</span>
              </template>
            </el-table-column>
            <el-table-column label="执行结果" align="center" width="100">
              <template slot-scope="scope">
                <span v-if="scope.row.status===200"><el-tag type="success">通过</el-tag></span>
                <span v-if="scope.row.status!==200"><el-tag type="danger">失败</el-tag></span>

              </template>
            </el-table-column>
            <el-table-column align="center" prop="created_at" label="执行人" width="80">
              <template slot-scope="scope">
                <span>{{ scope.row.username }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="action" label="操作">
              <template slot-scope="scope">
                <el-button type="primary" size="small" @click="view_result(scope.row)">查看详情</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="block">
            <el-pagination
              background
              :current-page="res_page.current_page"
              :page-sizes="[3]"
              :page-size="res_page.size_page"
              layout="total, sizes, prev, pager, next, jumper"
              :total="api_result.total"
              style="padding: 10px"
              @size-change="api_result_handleSizeChange"
              @current-change="api_result_handleCurrentChange"
            />
          </div>
        </div>
      </el-dialog>
    </div>
    <!-- 弹窗容器 -->
    <div class="popup-container" :class="{ visible: view_result_dialog }" style="width: 420px">
      <!-- 弹窗内容 -->
      <div class="popup-content">
        <!-- 关闭弹窗按钮 -->
        <div style="float: right; padding-right: 50px">
          <el-button style="position: fixed;" icon="el-icon-error" circle @click="close_dialog" />
        </div>
        <div style="padding-top: 50px">
          <el-collapse accordion @data="result_detail">
            <el-collapse-item title="请求地址" name="1">
              {{ result_detail.url }}
            </el-collapse-item>
            <el-collapse-item title="URL参数" name="2">
              <div>
                <json-viewer :value="result_detail.params" />
              </div>
            </el-collapse-item>
            <el-collapse-item title="请求头" name="3">
              <div>
                <json-viewer :value="result_detail.header" />
              </div>
            </el-collapse-item>
            <el-collapse-item title="请求体" name="4">
              <div>
                <json-viewer :value="result_detail.body" />
              </div>
            </el-collapse-item>
            <el-collapse-item title="响应结果" name="5">
              <div>
                <json-viewer :value="result_detail.response" />
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import vueJsonEditor from 'vue-json-editor'
import {
  add_environment,
  del_environment,
  edit_environment,
  get_envall,
  get_environment,
  getenvlist
} from "@/api/environment";
import {
  api_history_result,
  batch_send_request,
  delete_parametric,
  edit_parametric,
  get_batch_result,
  get_parametric,
  get_single_batch_result,
  sendrequest,
  upload_case_detail,
  upload_parametric
} from "@/api/testcase";
import { get_var_list } from "@/api/variable";
import Link from "../../layout/components/Sidebar/Link";
import JsonViewer from 'vue-json-viewer'
import time_views from '../utility/times_view'

export default {
  name: "CaseInfo",
  components: {
    // eslint-disable-next-line vue/no-unused-components
    Link,
    vueJsonEditor,
    JsonViewer,
    "time_view": time_views,
  },
  props: {
    // eslint-disable-next-line vue/require-default-prop
    form: [Array, Object]
  },
  data() {
    return {
      chart_name: "",
      result_detail: {},
      view_result_dialog: false,
      res_page: {
        current_page: 1,
        size_page: 3,
      },
      chartPie: null,
      api_result: {},
      history_view_dialog: false,
      markdown_view_dialog: false,
      markdown_value: "",
      var_table_data: [],
      var_page: {
        local_variable_name: "",
        current_page: 1,
        size_page: 6,
      },
      dialog_var_Visible: false,
      env_data: {},
      del_env_dialog: false,
      create_task: true,
      add_env_dialog: false,
      edit_parametric_dialog: false,
      batch_result_dialog: false,
      number: 1,
      tabs_activeName: "req_url",
      parametric_data: [],
      parametric: {
        current_page: 1,
        size_page: 3,
      },
      parametric_result: {
        current_page: 1,
        size_page: 4,
      },
      parametric_result_total: 0,
      parametric_total: 0,
      parametric_id: null,
      file_content: [],
      del_parametric_dialog: false,
      dialog_Import: false,
      upload_files: [],
      fileList: [],
      filename: "",
      file: "",
      table_data: [],
      dialogVisible: false,
      req_activeName: 'Params',
      res_activeName: 'body',
      url_input: '',
      method: '',
      local_variable_form: [
        {
          local_variable_name: '',
          local_variable_data: '',
          local_variable_result: '',
          local_variable_description: ''
        }
      ],
      batch_form: [],
      batch_result_details: [],
      parametric_type_form: [
        {
          label: "params参数",
          parametric_type: 1
        },
        {
          label: "Body参数",
          parametric_type: 2
        },
        {
          label: "断言参数",
          parametric_type: 3
        }
      ],
      method_form: [
        {
          label: "GET",
          method_value: 1
        },
        {
          label: "POST",
          method_value: 2
        },
        {
          label: "PUT",
          method_value: 3
        },
        {
          label: "DELETE",
          method_value: 4
        }
      ],
      api_type: [
        {
          label: "普通接口",
          api_type_value: 1
        }
      ],
      env_value: '',
      env_form: [],
      // 接口请求
      req_form: {
        url: '',
        environment_id: '',
        headers: {},
        body: {},
        params: [],
        method: '',
        body_type: '',
        assert: [],
        variable_extract: []
      },
      // 接口返回
      res_form: [
        {
          res_data: {},
          variable_extract: [
            {
              variable_name: '',
              variable_data: ''
            }
          ],
          assert_data: [
            {
              assert_key: '',
              assert_value: '',
              status: ''
            }
          ],
          variable: [{
            variable_name: '',
            variable_data: '',
            variable_result: ''
          }]
        }
      ],
      env_page: {
        env_name: "",
        current_page: 1,
        size_page: 7
      },
      var_total: null,
      env_case_total: null,
      time_view_dialog: false,
      markdown_render: ""
    }
  },
  mounted() {
    this.get_env()
  },
  created() {
    this.is_login()
  },
  methods: {
    is_login() {
      const user_id = localStorage.getItem("user_id");
      if (!user_id) {
        this.$router.push("/login");
        this.$message.error("未登录，请前往登录");
      }
    },
    renderHeader(h, { column, $index }) {
      // h 是一个渲染函数       column 是一个对象表示当前列      $index 第几列
      return h("div", [
        h("span", column.label + "  ", {
          align: "center",
          marginTop: "10px"
        }),
        h(
          "el-popover",
          {
            props: {
              placement: "top-start", // 一般 icon 处可添加浮层说明，浮层位置等属性
              width: "400px",
              trigger: "hover"
            }
          },
          [
            h("p", '例如返回值是：{"data": {"code": 200}}，请填写-> $..code', {
              class: "text-align: center; margin: 0"
            }),
            h("i", {
              // 生成 i 标签 ，添加icon 设置 样式，slot 必填
              class: "el-icon-question",
              style: "color:#ccc,margin:18px,padding-top:10px",
              slot: "reference"
            })
          ]
        )
      ])
    },
    markdown_save() {
      const req = {}
      req.id = this.form.id
      req.type = 2
      req.detail = this.markdown_render
      upload_case_detail(req).then(res => {
        if (res.data.code === 200) {
          this.$message({
            type: "success",
            message: res.data.message,
          })
          this.markdown_view_dialog = false
        } else {
          this.$message({
            type: "error",
            message: res.data.message,
          })
        }
      })
    },
    markdown_valueChange(value, render) {
      this.markdown_render = value
    },
    api_detail() {
      this.markdown_view_dialog = true
    },
    time_view() {
      this.time_view_dialog = true
    },
    // 页签-条/页 跳转
    handleparametricresultChange(val) {
      this.parametric_result.current_page = val
      this.get_parametric_result()
    },
    // 底部页签跳转
    handleparametricresultCurrentChange(val) {
      this.parametric_result.current_page = val
      this.get_parametric_result()
    },
    // 页签-条/页 跳转
    handleparametricChange(val) {
      this.parametric.current_page = val
      this.get_parametric_list()
    },
    // 底部页签跳转
    handleparametricCurrentChange(val) {
      this.parametric.current_page = val
      this.get_parametric_list()
    },
    // 编辑参数化数据
    edit_dialog(id, file_content) {
      this.edit_parametric_dialog = true
      this.parametric_id = id
      this.file_content = file_content
    },
    // 编辑参数化文件
    edit_p() {
      const req = {}
      req.parametric_id = this.parametric_id
      req.file_content = this.file_content
      edit_parametric(req).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.message)
          this.edit_parametric_dialog = false
          this.get_parametric_list()
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    // 删除参数化文件
    del_parametric(row) {
      this.del_parametric_dialog = true
      this.parametric_id = row
    },
    // 删除参数化文件
    delete_p() {
      delete_parametric({ "parametric_id": this.parametric_id.id }).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.message)
          this.del_parametric_dialog = false;
          this.get_parametric_list()
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    upload_file() {
      this.dialog_Import = true
      this.fileList = []
    },
    // 移除文件
    onRemove(file) {
      this.fileList = [];
    },
    onsuccess(res, file, fileList) {
    },
    handleChange(file, fileList) {
      this.fileList = [fileList[fileList.length - 1]]; // 只能上传一个Excel，重复上传会覆盖之前的
      this.file = file.raw;
      const reader = new FileReader()
      const _this = this;
      this.filename = this.file.name
      reader.readAsArrayBuffer(this.file)
      reader.onload = function() {
        const buffer = reader.result
        const bytes = new Uint8Array(buffer)
        const length = bytes.byteLength
        let binary = ''
        for (let i = 0; i < length; i++) {
          binary += String.fromCharCode(bytes[i])
        }
        const XLSX = require('xlsx')
        const wb = XLSX.read(binary, {
          type: 'binary'
        })
        _this.upload_files = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]], {
          defval: "" })
      }
    },
    input_file() {
      const req = {}
      req.parametric_type = this.form.parametric_type
      req.testcase_id = this.form.id
      req.filename = this.filename
      req.upload_data = this.upload_files
      req.user_id = Number(localStorage.getItem("user_id"))
      upload_parametric(req).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.message)
          this.dialog_Import = false
          this.get_parametric_list()
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    tab_click(tab, event) {
      if (tab.index === "5") {
        this.get_parametric_list()
      }
    },
    result_tab_click(tab) {
      if (tab.index === "4") {
        this.get_parametric_result()
      }
    },
    // 获取参数化执行结果
    get_parametric_result() {
      const req = {}
      req.testcase_id = this.form.id
      req.size_page = this.parametric_result.size_page
      req.current_page = this.parametric_result.current_page
      get_batch_result(req).then(res => {
        if (res.data.code === 200) {
          this.batch_form = res.data.content
          this.parametric_result_total = res.data.parametric_total
          this.parametric_result.current_page = res.data.current_page
          this.parametric_result.size_page = res.data.size_page
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    // 获取参数化文件信息
    get_parametric_list() {
      const req = {}
      req.testcase_id = this.form.id
      req.size_page = this.parametric.size_page
      req.current_page = this.parametric.current_page
      get_parametric(req).then(res => {
        if (res.data.code === 200) {
          this.parametric_data = res.data.parametric
          this.parametric_total = res.data.parametric_total
          this.parametric.current_page = res.data.current_page
          this.parametric.size_page = res.data.size_page
        }
      })
    },
    // 页签-条/页 跳转
    handleSizeChange(val) {
      this.env_page.size_page = val
      this.get_env_all()
    },
    // 底部页签跳转
    handleCurrentChange(val) {
      this.env_page.current_page = val
      this.get_env_all()
    },
    get_env_all() {
      this.dialogVisible = true
      const req = this.env_page
      req.user_id = Number(localStorage.getItem("user_id"))
      get_envall(req).then(res => {
        this.table_data = res.data.content
        this.env_case_total = res.data.case_total
        this.env_page.current_page = res.data.current_page
        this.env_page.size_page = res.data.size_page
      })
    },
    // 批量请求
    batch_send() {
      const req = this.req_form
      req.testcase_id = this.form.id
      req.user_id = Number(localStorage.getItem("user_id"))
      req.url = this.form.url
      req.environment_id = this.form.environment_id
      req.headers = this.form.headers
      req.body = this.form.body
      req.api_type = this.form.api_type
      req.params = this.form.params
      req.method = this.form.method
      req.body_type = this.form.body_type
      req.assert = this.form.assert_form
      req.variable_extract = this.form.extract
      batch_send_request(req).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.message)
          this.batch_form = res.data.content
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    // 查看批量执行的单个结果
    batch_result_info(id) {
      this.batch_result_dialog = true
      get_single_batch_result({ "id": id }).then(res => {
        if (res.data.code === 200) {
          this.batch_result_details = res.data.content[0]
          const { body, params, extract_result, assert_data } = this.batch_result_details
          this.batch_result_details.body = JSON.parse(body)
          this.batch_result_details.params = JSON.parse(params)
          this.batch_result_details.extract_result = JSON.parse(extract_result)
          this.batch_result_details.assert_data = JSON.parse(assert_data)
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    // 单次发送请求
    send() {
      const req = this.req_form
      req.testcase_id = this.form.id
      req.user_id = Number(localStorage.getItem("user_id"))
      req.url = this.form.url
      req.environment_id = this.form.environment_id
      req.headers = this.form.headers
      req.body = this.form.body
      req.api_type = this.form.api_type
      req.params = this.form.params
      req.method = this.form.method
      req.body_type = this.form.body_type
      req.assert = this.form.assert_form
      req.variable_extract = this.form.extract
      sendrequest(this.req_form).then(res => {
        if (res.data.code !== 200) {
          this.number = 1
          const data = res.data
          this.res_form.res_data = { "Exception": data.message }
          this.res_form.status = data.content.status
          this.res_form.size = data.content.size
          this.res_form.response_time = data.content.response_time
          this.$message.error(res.data.message)
        } else {
          this.number = 1
          this.res_form = res.data
        }
      })
    },
    add_params() {
      const list = {
        key: '',
        value: ''
      }
      this.form.params.push(list)
    },
    // 删除Params
    del_params(index, row) {
      this.form.params.splice(index, 1)
    },
    // 新增Assert
    add_assert() {
      const list = {
        assert_key: '',
        assert_value: ''
      }
      this.form.assert_form.push(list)
    },
    // 删除Assert
    del_assert(index, row) {
      this.form.assert_form.splice(index, 1)
    },
    // 新增本地变量
    add_extract_form() {
      const list = {
        variable_name: '',
        variable_value: ''
      }
      this.form.extract.push(list)
    },
    // 删除本地变量
    del_extract_form(index, row) {
      this.form.extract.splice(index, 1)
    },
    get_env() {
      getenvlist({ "user_id": localStorage.getItem("user_id") }).then(res => {
        this.env_form = res.data.content
      })
    },
    create_env() {
      this.env_data = {
        environment_name: "",
        environment_address: "",
        environment_describe: ""
      }
      this.number = 1
      this.add_env_dialog = true
    },
    edit_env_dialog(environment_id) {
      this.number = 2
      this.add_env_dialog = true
      this.environment_id = environment_id
      get_environment({ "env_id": this.environment_id, "user_id": localStorage.getItem("user_id") }).then(res => {
        if (res.data.code === 200) {
          this.env_data = res.data.content[0]
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    add_env() {
      const req = this.env_data
      req.environment_name = this.env_data.environment_name
      req.environment_address = this.env_data.environment_address
      req.environment_describe = this.env_data.environment_describe
      req.user_id = Number(localStorage.getItem("user_id"))
      add_environment(this.env_data).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.message)
          this.add_env_dialog = false
          this.get_env_all()
          this.get_env()
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    edit_env() {
      const req = this.env_data
      req.env_id = this.environment_id
      req.environment_name = this.env_data.environment_name
      req.environment_address = this.env_data.environment_address
      req.environment_describe = this.env_data.environment_describe
      req.user_id = Number(localStorage.getItem("user_id"))
      edit_environment(this.env_data).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.message)
          this.add_env_dialog = false
          this.get_env_all()
          this.get_env()
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    del_env() {
      const req = {}
      req.env_id = this.environment_id
      del_environment(req).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.message)
          this.del_env_dialog = false
          this.get_env_all()
          this.get_env()
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    del_dialog(env_id) {
      this.del_env_dialog = true
      this.environment_id = env_id
    },
    // 页签-条/页 跳转
    handleSizeChange_var(val) {
      this.var_page.size_page = val
      this.get_var_all()
    },
    // 底部页签跳转
    handleCurrentChange_var(val) {
      this.var_page.current_page = val
      this.get_var_all()
    },
    get_var_all() {
      this.dialog_var_Visible = true
      const req = this.var_page
      req.user_id = Number(localStorage.getItem("user_id"))
      get_var_list(req).then(res => {
        if (res.data.code === 200) {
          this.var_table_data = res.data.content
          this.var_total = res.data.var_total
          this.env_page.current_page = res.data.current_page
          this.env_page.size_page = res.data.size_page
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    // 页签-条/页 跳转
    api_result_handleSizeChange(val) {
      this.res_page.size_page = val
      this.api_history()
    },
    // 底部页签跳转
    api_result_handleCurrentChange(val) {
      this.res_page.current_page = val
      this.api_history()
    },
    api_history() {
      this.history_view_dialog = true
      this.chart_name = this.form.id.toString()
      const req = this.res_page
      req.user_id = localStorage.getItem("user_id")
      req.testcase_id = this.form.id
      api_history_result(req).then(res => {
        if (res.data.code === 200) {
          this.api_result = res.data
          this.drawPieChart(this.chart_name, res.data.case_status_count, res.data.case_status_list)
          this.total = res.data.total
          this.res_page.current_page = res.data.current_page
          this.res_page.size_page = res.data.size_page
        }
      })
    },
    drawPieChart(name, count, list) {
      console.log(count)
      console.log(list)
      const a = document.getElementById(name)
      this.chartPi = this.$echarts.init(a)
      this.chartPi.setOption({
        title: {
          text: '接口执行历史',
          x: 'center'
        },
        label: {
          show: true,
          formatter: "{b} : {c} ({d}%)", // b代表名称，c代表对应值，d代表百分比,
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: ["通过", "失败"]
        },
        series: [
          {
            name: '执行状态',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: count,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }, true, false);
    },
    view_result(data) {
      this.view_result_dialog = true
      this.result_detail = data
      console.log(this.result_detail)
    },
    close_dialog() {
      this.view_result_dialog = false
    }
  }
}
</script>

<style lang="scss">
.req_activeName_global_box{
  max-width: 100%;
    max-height: 100%;
    box-shadow: 0 0 0.01vw #000000 inset;
    padding:0;
}
  .global_box {
    max-width: 100%;
    max-height: 100%;
    box-shadow: 0 0 0.01vw #000000 inset;
    padding:0;
}

.jsoneditor-outer{
   height: 305px !important;
  }
  .el-tooltip__popper,.el-tooltip__popper.is-dark{
    background:rgb(48, 65, 86) !important;
    color: #fff !important;
    line-height: 22px;
  }
.el-tooltip__popper {
    max-width: 90%;
}
.el-tabs--border-card>.el-tabs__content {
    padding: 5px;
}
.tab-info {
  display: flex;
  align-items: center;
  margin-left: 10px;
}

.code,
.size {
  font-size: 14px;
  color: #c94545;
  margin-left: 5px;
}
.popup-container {
  position: fixed;
  top: 0;
  right: -450px; /* 弹窗默认隐藏在屏幕右侧 */
  width: 420px;
  height: 100%;
  background-color: #fff;
  transition: right 0.3s; /* 过渡动画效果 */
  z-index: 9999;
  overflow: auto;
}
.popup-container.visible {
  right: 0; /* 显示弹窗 */
}
.popup-content {
  padding: 10px;
}
</style>
